<template>
  <div class="">
    <Common :sidebar="false" :isComment="false">
      <section class="project">
        <h1 class="project-title">Github热点汇总</h1>
        <h4 class="project-subtitle">如果你觉得下面的项目可能还不错, 别忘了给个 star 吧！</h4>
        <section class="project-loading" v-if="loading">
          <img src="./img/loading.svg">
          <span>Loading...</span>
        </section>
        <section class="project-container" v-else>
          <article v-for="(item, index) in projects" :key="index">
            <project-item :options="item"></project-item>
          </article>
        </section>
      </section>
    </Common>
  </div>
</template>

<script>
import Common from "@theme/components/Common.vue";
import ProjectItem from "./ProjectItem.vue";
import { httpGet } from "./utils/fetch.js";
import { filter, orderBy } from "lodash";
export default {
  name: "Projects",
  components: {
    Common,
    ProjectItem
  },
  data() {
    return {
      projects: [],
      loading: true,
      projArr: [
        {
          "name": "ollama",
          "html_url": "https://github.com/ollama/ollama",
          "description": "本地运行LLM",
          "language": "",
          "stargazers_count": "",
          "forks_count": "",
        },
        {
          "name": "LLaMA-Factory",
          "html_url": "https://github.com/hiyouga/LLaMA-Factory",
          "description": "微调工具",
          "language": "",
          "stargazers_count": "",
          "forks_count": "",
        },
        {
          "name": "twenty",
          "html_url": "https://github.com/twentyhq/twenty",
          "description": "Salesforce 替代",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "open-webui",
          "html_url": "https://github.com/open-webui/open-webui",
          "description": "LLM的Web UI",
          "language": "",
          "stargazers_count": "",
          "forks_count": "",
        },
        {
          "name": "Awesome-Chinese-LLM",
          "html_url": "https://github.com/HqWu-HITCS/Awesome-Chinese-LLM",
          "description": "中文LLM资料",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "grok-1",
          "html_url": "https://github.com/xai-org/grok-1",
          "description": "马斯克的大模型",
          "language": "",
          "stargazers_count": "",
          "forks_count": "",
        },
        {
          "name": "Open-Sora",
          "html_url": "https://github.com/hpcaitech/Open-Sora",
          "description": "Sora开源实现",
          "language": "",
          "stargazers_count": "",
          "forks_count": "",
        },
        {
          "name": "MediaCrawler",
          "html_url": "https://github.com/NanmiCoder/MediaCrawler",
          "description": "爬虫",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "full-stack-fastapi-template",
          "html_url": "https://github.com/tiangolo/full-stack-fastapi-template",
          "description": "全栈web模板",
          "language": "",
          "stargazers_count": "",
          "forks_count": "",
        },
        {
          "name": "gpt-pilot",
          "html_url": "https://github.com/Pythagora-io/gpt-pilot",
          "description": "AI开发者",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "pubscholar",
          "html_url": "https://pubscholar.cn",
          "description": "中科院免费论文文献网站",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "紫东太初",
          "html_url": "https://taichu-web.ia.ac.cn",
          "description": "中科院免费全模态AI网站",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "PaperFine",
          "html_url": "https://paperfine.cn/",
          "description": "AI论文生成网站",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "中国科普博览",
          "html_url": "http://v.kepu.net.cn",
          "description": "中科院免费科普学习网站",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "学习CSS布局",
          "html_url": "https://zh.learnlayout.com/",
          "description": "学习CSS布局-CSS基础",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "dep-tree",
          "html_url": "https://github.com/gabotechs/dep-tree",
          "description": "可视化形式展示代码库的 '熵'（混乱程度）的工具",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "public-apis",
          "html_url": "https://github.com/public-apis/public-apis",
          "description": "国外的api",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
        {
          "name": "Awesome_APIs",
          "html_url": "https://github.com/TonnyL/Awesome_APIs",
          "description": "国内最全的api",
          "language": "",
          "stargazers_count": "",
          "forks_count": ""
        },
      ],
    };
  },
  mounted() {
    this.getProjects();
  },
  methods: {
    getProjects() {
      this.loading = true;
      this.projects = this.projArr;
      this.loading = false;
      // httpGet("https://api.github.com/users/zpj80231/repos").then(res => {
      //   this.loading = false;
      //   // 过滤掉私有的项目, 暂不过滤掉 fork 项目 && !item.fork
      //   const projects = filter(res, item => !item.private);
      //   this.projects = orderBy(
      //     projects,
      //     ["stargazers_count", "forks_count", "name", "created_at"],
      //     ["desc", "desc", "asc", "desc"]
      //   );
      // });

    }
  }
};
</script>

<style lang="css" scoped>
.project {
  max-width: 1024px;
  min-height: 300px;
  margin: 4rem auto;
  margin-top: 6rem;
}

.project-title,
.project-subtitle {
  text-align: center;
}

.project-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-loading img {
  position: relative;
}

.project-loading span {
  position: absolute;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>